import 'package:flutter/material.dart';

class KanderstegListView extends StatelessWidget {

  KanderstegListView({BuildContext context}) :context = context;

  final BuildContext context;

  @override
  Widget build(BuildContext context1) {
    Widget titleSection = new Container(
        padding: const EdgeInsets.all(32.0),
        child: new Row(
          children: [
            new Expanded(
              child: new Column(
                // 将该列中的子项左对齐
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Container(
                    padding: const EdgeInsets.only(bottom: 8.0),
                    child: new Text(
                      'Oeschinen湖露营地',
                      style: new TextStyle(
                          fontWeight: FontWeight.bold
                      ),
                    ),
                  ),
                  new Text(
                    '瑞士-坎德施泰格',
                    style: new TextStyle(
                        color: Colors.grey[500]
                    ),
                  ),
                ],
              ),
            ),
//            new Icon(
//              Icons.star,
//              color: Colors.red[500],
//            ),
//            new Text('4'),
            new FavoriteWidget(),
          ],
        )
    );

    Column buildButtonColumn(IconData icon, String label) {
      Color color = Theme
          .of(context)
          .primaryColor;

      return new Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new Icon(icon, color: color,),
          new Container(
            margin: const EdgeInsets.only(top: 8.0),
            child: new Text(
              label,
              style: new TextStyle(
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: color,
              ),
            ),
          )
        ],
      );
    }

    Widget buttonSection = new Container(
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          buildButtonColumn(Icons.call, '电话'),
          buildButtonColumn(Icons.near_me, '附近'),
          buildButtonColumn(Icons.share, '分享'),
        ],
      ),
    );

    Widget textSection = new Container(
      padding: const EdgeInsets.all(32.0),
      child: new Text(
        '''      坎德施泰格是阿尔卑斯山中的一座小镇，其Allmenalp Klettersteig铁索攀岩受到喜欢挑战极限的户外运动爱好者的垂青''',
        softWrap: true,
      ),
    );
    return Scaffold(
      appBar: new AppBar(
        title: Text('Top Lake'),
      ),
      body: new ListView(
        children: <Widget>[
          new Image.asset(
            'images/lake.jpg',
            width: 600.0,
            height: 240.0,
            fit: BoxFit.cover,
          ),
          titleSection,
          buttonSection,
          textSection,
        ],
      ),
    );
  }
}


// 喜欢/不喜欢的 五角星按钮,保存状态。
class FavoriteWidget extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return new _FavoriteWidgetState();
  }

}

class _FavoriteWidgetState extends State<FavoriteWidget> {

  int _favoriteCount = 41;

  bool _favorited = true;

  void _toggleFavorite() {
    setState(() {
      if (_favorited) {
        _favoriteCount -= 1;
        _favorited = false;
      } else {
        _favoriteCount += 1;
        _favorited = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        new Container(
          padding: new EdgeInsets.all(0.0),
          child: new IconButton(
              icon: (_favorited ? new Icon(Icons.star) : new Icon(
                  Icons.star_border)),
              color: Colors.red[500],
              onPressed: _toggleFavorite
          ),
        ),
        new SizedBox(
          width: 18.0,
          child: new Container(
            child: new Text('$_favoriteCount'),
          ),
        )
      ],
    );
  }
}
